@import url(./common/global.less);

.ct-step {
  &.ct-step__column {
    display: flex;
    .ct-step__head {
      width: 26px;
      flex-grow: 0;
    }
    .ct-step__line {
      position: absolute;
      width: 2px;
      height: initial;
      top: 0;
      bottom: 0;
      left: 11px;
      border: 1px solid @grey-bg-color1;
    }
  }

  &.ct-step__row {
    .ct-step__line {
      margin-top: 12px;
      transform: translateY(-50%);
      height: 1px;
      border: 1px solid @grey-bg-color1;
    }
  }

  .ct-step__head {
    overflow: hidden;
    height: 26px;
    flex-grow: 0;

    .ct-step__iconfont {
      font-size: 24px;
      position: absolute;
      z-index: 99;
      background-color: white;
    }

    .ct-step__img {
      position: absolute;
      z-index: 99;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: white;
      border: 2px solid @grey-bg-color1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: @grey-bg-color1;
    }
  }

  .ct-step__main {
    font-size: 16px;
    color: @grey-bg-color1;
  }
}
